<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>饮茶🍵 提醒⏰ 小助手</title>
  <link rel="stylesheet" href="/yum-cha/styles/index.css">
</head>

<body>
  <div id="app">
    <h1 class="title">饮茶🍵 提醒⏰ 小助手</h1>
    <div class="alert-time">距{{ nextTimeText }}饮茶还有：</div>
    <div class="timeout">{{ timeoutText }}</div>
    <div>
      <button class="btn success" v-if="!isStart" @click="handleStart">开始计时</button>
      <button class="btn danger" v-else @click="handleStop">停止计时</button>
    </div>
    <div class="drawer" :class="{visible: isTimeout}">
      <h1 class="title">饮茶🍵 时间到⏰ ～～</h1>
      <div class="video">
        <video ref="v" src="/yum-cha/assets/v.mp4"></video>
      </div>
      <div class="btns">
        <button class="btn danger" @click="handleStart">稍后再饮</button>
        <button class="btn success" @click="handleStop">在饮了在饮了</button>
      </div>
    </div>
  </div>
  <script src="/yum-cha/libs/vue.min.js"></script>
  <script src="/yum-cha/scripts/index.js"></script>
</body>

</html>